<template>
    <TitleBox :title="title" :imgsrc="imgsrc"/>
    <div class="collapse-container">
      <div class="title">
        5月5日  下午
      </div>
      <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="格物致知@西湖论剑[18:00-21:00]" name="day1-1">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
          </el-collapse-item>
          <el-collapse-item title="95后极客Talk[19:00-20:00]" name="day1-2">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
          </el-collapse-item>
          <el-collapse-item title="当科幻照进现实我们会更安全吗？[20:00-20:30]" name="day1-3">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
          </el-collapse-item>
          <el-collapse-item title="人工智能会颠覆安全行业吗？[20:30-21:00]" name="day1-4">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
          </el-collapse-item>
      </el-collapse>
    </div>
    <div class="collapse-container">
      <div class="title">
        5月6日 上午
      </div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="格物致知@西湖论剑" name="day2-1">
              <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
            </el-collapse-item>
            <el-collapse-item title="95后极客Talk" name="day2-2">
              <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
            </el-collapse-item>
            <el-collapse-item title="当科幻照进现实我们会更安全吗？" name="day2-3">
              <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
            </el-collapse-item>
            <el-collapse-item title="人工智能会颠覆安全行业吗？" name="day2-4">
              <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :timestamp="activity.timestamp"
                placement="top"
              ><div class="content">
                <div class="summary">
                  {{ activity.content }}
                </div>
                <div class="expert">
                  演讲嘉宾：
                  {{ activity.expert }}
                </div>   
              </div>
              </el-timeline-item>
            </el-timeline>
            <div class="play-sub">    
              <a href="javascript:;">
                <el-icon size="1.0417vw"><VideoPlay /></el-icon>
                &nbsp;
                  观看
              </a>
              <a href="javascript:;">
                <el-icon size="1.0417vw"><Promotion /></el-icon>
                &nbsp;
                  订阅
              </a>
            </div>
            </el-collapse-item>
        </el-collapse>
    </div>

</template>

<script lang="ts" setup name="Assignment">
    import TitleBox from '@/components/titlebox.vue';
    import { ref } from 'vue'
    import img from '@/assets/assignment/assignment_welcome.png'
   
    const title = '大会议程'
    const imgsrc = img

    const activeNames = ref(['day1-1'])
    const handleChange = (val: string[]) => {
        console.log(val)
    }

    const activities = [
      {
        content: 'Consistent within interface: all elements should be consistent, suchas: design style, icons and texts, position of elements, etc.',
        expert: '范渊',
        timestamp: '20:46',
        type: 'primary',
      },
      {
        content: 'Simplify the process: keep operating process simple and intuitive;',
        expert: '刘世锦',
        timestamp: '20:46',
      },
      {
        content: 'Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;',
        expert: '沈昌祥',
        timestamp: '20:46',
      },
      {
        content: 'Decision making: giving advices about operations is acceptable, but do not make decisions for the users;',
        expert: '邬贺铨',
        timestamp: '20:46',
        type: 'primary',
      },
      {
        content: 'Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.',
        expert: '谭晓生',
        timestamp: '20:46',
      },
    ]
</script>

<style scoped lang="scss">

.collapse-container{
    width: 100%;
    margin-bottom: 5vw;
    overflow: hidden;
    z-index: 1;
    border-radius: 1.0417vw;
    .title{
      padding: 1.25vw;
      line-height: 1.2222222222;
      font-size: 2.5vw;
      font-weight: 400;
      letter-spacing: -.5px;
    }
    ::v-deep(.el-collapse-item__header){
      padding: 1.25vw;
      font-size: 1.2vw;
      height: 4vw;
      border-top: 1px solid #f1f3f4;
    }
    ::v-deep(.el-collapse-item__content){
      font-size: 1.2vw;
      padding: 1.25vw;
    }
    .content{
      .summary{
        font-size: .8333vw;
        line-height: 1.6667vw;
      }
      .expert{
        font-size: .8333vw;
        line-height: 1.6667vw;
      }
    }
    .play-sub{
      display: flex;
      a{
        display: flex;
        flex:0.1;
        align-items: center;  
        text-decoration: none;
        font-size: .8333vw;
      }
    }
}
</style>
  